<template>
    <div id="container3"></div>
</template>

<script>
import { PivotSheet } from '@antv/s2';
export default {
    data() {
        return {
            customTree: [
                {
                    field: 'a-1',
                    title: '自定义节点 a-1',
                    description: 'a-1 描述',
                    children: [
                        {
                            field: 'a-1-1',
                            title: '自定义节点 a-1-1',
                            description: 'a-1-1 描述',
                            children: [
                                {
                                    field: 'measure-1',
                                    title: '指标 1',
                                    description: '指标 1 描述',
                                    children: [
                                        {
                                            field: 'measure-2',
                                            title: '指标 2',
                                            description: '指标 2 描述',
                                            children: [
                                                {
                                                    field: 'measure-2',
                                                    title: '指标 2',
                                                    description: '指标 2 描述',
                                                    children: [

                                                    ],
                                                },
                                            ],
                                        },
                                        {
                                            field: 'measure-2',
                                            title: '指标 2',
                                            description: '指标 2 描述',
                                            children: [],
                                        },

                                    ],
                                },
                                {
                                    field: 'measure-2',
                                    title: '指标 2',
                                    description: '指标 2 描述',
                                    children: [],
                                },
                                {
                                    field: 'measure-2',
                                    title: '指标 3',
                                    description: '指标 3描述',
                                    children: [],
                                },
                            ],
                        },
                        {
                            field: 'measure-3',
                            title: '自定义节点 a-1-2',
                            description: 'a-1-2 描述',
                            children: [],
                        },
                        {
                            field: 'measure-3',
                            title: '自定义节点 a-1-2',
                            description: 'a-1-2 描述',
                            children: [],
                        },
                        {
                            field: 'measure-3',
                            title: '自定义节点 a-1-2',
                            description: 'a-1-2 描述',
                            children: [],
                        },
                    ],
                },
                {
                    field: 'measure-4',
                    title: '自定义节点 a-2',
                    description: 'a-2 描述',
                    children: [
                        {
                            field: 'measure-5',
                            title: '自定义节点 a-2',
                            description: 'a-2 描述',
                            children: [],
                        },
                    ],
                },

            ],
            data: [
                {
                    'measure-1': 13,
                    'measure-2': 2,
                    'measure-3': 3,
                    'measure-4': 6,
                    type: '家具',
                    sub_type: '桌子',
                },
                {
                    'measure-1': 11,
                    'measure-2': 8,
                    'measure-3': 44,
                    'measure-4': 55,
                    type: '家具',
                    sub_type: '椅子',
                },
                {
                    'measure-1': 13,
                    'measure-2': 2,
                    'measure-3': 3,
                    'measure-4': 6,
                    type: '家具2',
                    sub_type: '桌子2',
                },
                {
                    'measure-1': 13,
                    'measure-2': 2,
                    'measure-3': 3,
                    'measure-4': 6,
                    type: '家具2',
                    sub_type: '桌子2',
                },
            ],

        }
    },
    methods: {
        async render() {
            const container = document.getElementById('container3');
            const s2DataConfig = {
                fields: {
                    rows: this.getTreeMore(),
                    columns: ['type', 'sub_type'],
                    values: ['measure-1', 'measure-2', 'measure-3', 'measure-4'],
                    valueInCols: false,
                },
                data: this.getMoreData(),
                // 自定义节点默认使用 `title` 作为展示名, 角头默认使用行头每一列的第一个节点作为展示名, 也可以通过 meta 来统一进行格式化
                meta: [
                    {
                        field: 'a-1',
                        name: '角头名称1',
                        formatter: () => '当前节点自定义名称1',
                    },
                    {
                        field: 'a-1-1',
                        name: '角头名称2',
                        formatter: () => '当前节点自定义名称2',
                    },

                ],
            };

            const s2Options = {
                width: 1000,
                height: 880,
                hierarchyType: 'grid',
                // cornerText: '自定义角头标题',
            };

            const s2 = new PivotSheet(container, s2DataConfig, s2Options);

            await s2.render();


        },
        getMoreData() {
            let data = []
            for (let i = 0; i < 10000; i++) {
                data.push({
                    'measure-1': Math.random().toFixed(2),
                    'measure-3': Math.random().toFixed(2),
                    'measure-2': Math.random().toFixed(2),
                    'measure-4': Math.random().toFixed(2),
                    type: `家具${i}`,
                    sub_type: `桌子${i}`,

                })

            }
            return data
        },
        getTreeMore() {
            for (let i = 0; i < 100; i++) {
                this.customTree.push( {
                    field: 'a-1',
                    title: '自定义节点 a-1',
                    description: 'a-1 描述',
                    children: [
                        {
                            field: 'a-1-1',
                            title: '自定义节点 a-1-1',
                            description: 'a-1-1 描述',
                            children: [
                                {
                                    field: 'measure-1',
                                    title: '指标 1',
                                    description: '指标 1 描述',
                                    children: [
                                        {
                                            field: 'measure-2',
                                            title: '指标 2',
                                            description: '指标 2 描述',
                                            children: [
                                                {
                                                    field: 'measure-2',
                                                    title: '指标 2',
                                                    description: '指标 2 描述',
                                                    children: [

                                                    ],
                                                },
                                            ],
                                        },
                                        {
                                            field: 'measure-2',
                                            title: '指标 2',
                                            description: '指标 2 描述',
                                            children: [],
                                        },

                                    ],
                                },
                                {
                                    field: 'measure-2',
                                    title: '指标 2',
                                    description: '指标 2 描述',
                                    children: [],
                                },
                                {
                                    field: 'measure-2',
                                    title: '指标 3',
                                    description: '指标 3描述',
                                    children: [],
                                },
                            ],
                        },
                        {
                            field: 'measure-3',
                            title: '自定义节点 a-1-2',
                            description: 'a-1-2 描述',
                            children: [],
                        },
                        {
                            field: 'measure-3',
                            title: '自定义节点 a-1-2',
                            description: 'a-1-2 描述',
                            children: [],
                        },
                        {
                            field: 'measure-3',
                            title: '自定义节点 a-1-2',
                            description: 'a-1-2 描述',
                            children: [],
                        },
                    ],
                },)
            }
            return this.customTree
        }
    },
    mounted() {
        this.render()
    }
}
</script>
